import React from 'react'
import '../../assets/css/profile/userinfo.less'
import connect from "react-redux/es/connect/connect";
import {Modal, Toast} from 'antd-mobile';
import 'antd-mobile/lib/modal/style/index.css'
import store from "../../store";
class UserInfoComponent extends React.Component{
    constructor(props){
        super(props)
        console.log(props.state);
        this.state={
            uid:'',
            nickname:'',
            gender:'',
            head:'',
            headImg:'',
            modal:false
        }
    }
    componentDidMount(){
        this.getUser()
    }
    setUser(res){
        this.setState({
            uid:res.data.uid,
            nickname:res.data.nickname,
            gender:res.data.gender,
            head:res.data.head,
        })
        // localStorage.setItem('userInfo', JSON.stringify(this.state));
        // store.dispatch({type:'setuser',value:res.data})
       
    }
    // 获取用户信息
    getUser(){
        fetch('http://vueshop.glbuys.com/api/user/myinfo/userinfo/uid/'+localStorage['uid']+'?token=1ec949a15fb709370f').then((res)=>res.json())
            .then((res)=>{
                if(res.code===200){
                    console.log(res.data);
                    this.setUser(res)
                }
            })
    }

    goBack(){
        this.props.history.goBack()
    }
    showModal(e){
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            modal: true,
        });
    }

    onClose(){
        this.setState({
            modal: false,
        });
    }

    uploadHead(){
        let oHeadFile = this.refs['headFile']
        if(oHeadFile.files[0]!==undefined){
            let formdata= new FormData()
            formdata.append('headfile',oHeadFile.files[0])
            fetch('http://vueshop.glbuys.com/api/user/myinfo/formdatahead?token=1ec949a15fb709370f',{
                method:'post',
                body:formdata
            }).then(res=>res.json())
                .then(res=>{
                    if(res.code=200){
                        this.setState({
                            headImg:res.data.msbox,
                            head:"//vueshop.glbuys.com/userfiles/head/"+res.data.msbox
                        })
                    }
                })
        }
    }

    setUserInfo(){
      const params = new URLSearchParams()
      params.append('uid', this.state.uid)
      params.append('nickname', this.state.nickname)
      params.append('gender', this.state.gender)
      params.append('head', this.state.headImg)
      console.log(this.state);
      fetch(
          'http://vueshop.glbuys.com/api/user/myinfo/updateuser?token=1ec949a15fb709370f',
          {
              method: 'POST',
              body: params,
          }
      )
          .then((res) => res.json())
          .then((res) => {
              console.log(res)
              if (res.code === 200) {
                console.log(res.data)
                this.getUser()
                Toast.success('修改成功', 1);
              }
          })
    }

    render() {
        return(
            <div id='userinfo'>
                <div className='header'>
                    <div onClick={this.goBack.bind(this)}>
                        <img src="/images/user/my/返回.png" alt=""/>
                    </div>
                    <div>个人资料</div>
                    <div onClick={this.setUserInfo.bind(this)}>保存</div>
                </div>
                <div className='user-header'>
                    <div>头像</div>
                    <div style={{position:'relative'}}>
                        {JSON.parse(this.props.state.login)?
                            <img src={this.state.head} alt=""/>:
                            <img src="/images/user/my/default-head.png" alt=""/>
                        }
                        <form  action="" id="userForm" method="post">
                            <input ref='headFile' type="file" style={{position:'absolute',top:'0',width:'100%',height:'100%',opacity:'0'}}  onChange={this.uploadHead.bind(this)} />
                        </form>
                    </div>
                </div>
                <div className='user-nickname'>
                    <div>昵称</div>
                    <div>
                        <input type="text" onChange={e=>{
                            this.setState({nickname:e.target.value})
                        }} value={this.state.nickname} />
                        <img src="/images/common/right_arrow.png" alt=""/>
                    </div>
                </div>
                <div className='user-gender'>
                    <div>性别</div>
                    <div  onClick={this.showModal.bind(this)}>
                        <div>
                            {this.state.gender===''||this.state.gender==='0'?
                            <p style={{color:'rgba(169,169,169,1)'}}>请选择性别</p>:
                                <span>
                                    {this.state.gender==='1'?'男':'女'}
                                </span>

                            }
                        </div>
                        <img src="/images/common/right_arrow.png" alt=""/>
                    </div>
                </div>
                <Modal
                    popup
                    visible={this.state.modal}
                    onClose={this.onClose.bind(this)}
                    animationType="slide-up"
                    afterClose={() => { ;}}
                    style={{borderTopLeftRadius:'15px',overflow:'hidden',borderTopRightRadius:'15px'}}
                >
                  <div className='modal-gender' style={{lineHeight:'47px',color:'black',fontSize:'16px',background:'#F8F8F8',
                  }}>
                      <div style={{marginBottom:'2px',background:'white'}}>请选择性别</div>
                      <div style={{marginBottom:'2px',background:'white'}}
                        onClick={()=>{
                            this.setState({
                                gender:'1'
                            })
                            this.onClose()
                        }}
                      >男</div>
                      <div style={{marginBottom:'15px',background:'white'}}
                           onClick={()=>{
                               this.setState({
                                   gender:'2'
                               })
                               this.onClose()
                           }}
                      >女</div>
                      <div style={{background:'white'}}
                           onClick={()=>{
                               this.onClose()
                           }}
                      >取消</div>
                  </div>
                </Modal>
            </div>
        )
    }
}
export default  connect((state)=>{
    return{
        state
    }
})(UserInfoComponent)